<template>
    <div class="header block">
        <div class="row">
            <div class="company-name">
                <div class="value">
                    派遣单位名称：{{ insureProject.serveCompanyName }}
                </div>
                <div>
                    方案：{{ insureProject.comboName }}
                </div>
            </div>
            <div>
<!--                <button class="btn" @click="onExport">-->
<!--                    <i class="el-icon el-icon-upload2" />-->
<!--                     导出-->
<!--                </button>-->
                <export-button @export="onExport"></export-button>
            </div>
        </div>
        <div class="row basic">
            <div>
                <span class="key">投保人数：</span>
                <span class="value">{{ insureProject.insurePeople }}人</span>
                <span class="key">费用总计：</span>
                <span class="value">{{ insureProject.amount }}元</span>
                <span class="key">生效日期：</span>
                <span class="value ">{{ insureProject.beginCreateTime }}</span>
                <span class="key">截止日期：</span>
                <span class="value ">{{ insureProject.endCreateTime }}</span>
            </div>
        </div>
    </div>
    <div class="container block">
        <!-- <div class="header">
            <div class=""></div>
            <div class="download">
                <button class="btn-green download-btn" @click="onExport">
                    <i class="el-icon el-icon-download" />
                    下载领薪详细
                </button>
            </div>
        </div> -->
        <div class="table">
            <el-table
                :data="tableData"
                style="width: 100%"
                :header-row-style="{ color: '#202536' }"
                :row-style="{ color: '#5E617D' }"
            >
                <el-table-column type="index" label="序号"/>
                <el-table-column prop="userName" label="姓名" />
                <el-table-column prop="idCardNo" label="身份证号" />
                <el-table-column prop="phone" label="电话号码" />
                <el-table-column prop="amount" label="保费" />
            </el-table>
            <el-pagination
                class="pagination"
                v-model:currentPage="pageNum"
                v-model:page-size="pageSize"
                :page-sizes="[10, 30, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { insureDeductionDetailExport } from '@/api/export'
import { insureDeductionDetail, insureDeductionDetailListDto, InsureProjectDto } from '@/api/insure-deduction'
export default defineComponent({
    name: 'InsureDeductionDetail',
    data () {
        return {
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tableData: [] as insureDeductionDetailListDto[],
            month: '',
            insureProject: {} as InsureProjectDto
        }
    },
    created () {
        this.getInsureRecord()
    },
    methods: {
        getInsureRecord () {
            insureDeductionDetail({
                id: this.$route.params.id,
                pageSize: this.pageSize,
                pageNum: this.pageNum
            }).then(res => {
                this.tableData = res.list
                this.total = res.totalCount
                this.insureProject = res.insureProject as InsureProjectDto
                console.log(this.insureProject, 'insureProject')
                console.log(this.insureProject, 'insureProjectinsureProject')
            })
        },
        handleCurrentChange () {
            this.getInsureRecord()
        },
        handleSizeChange () {
            this.pageNum = 1
            this.handleCurrentChange()
        },
        async onExport () {
            const result = await insureDeductionDetailExport({
                ids: this.$route.params.id + ''
            })
            window.location.href =
                process.env.VUE_APP_BASE_URL +
                    '/common/download?delete=true&fileName=' +
                    result

            this.$message.success('导出成功！')
        }
    }
})
</script>

<style lang="stylus" scoped>
table()
.header.block{
    padding 20px
}
.basic
    margin-top 20px
.value
    margin-right 30px
:deep() .month-picker
    margin-left 20px
:deep() .el-input--prefix .el-input__inner
    padding-right 0
    background white
    // border unset
    position relative

.download-btn
    width 120px

.value.important
    color color-red
    font-style italic
.company-name
    display flex
    color #202631
    font-size 16px
    font-weight 500
</style>
